<template>
  <div class="app-main">
    <div class="Department-container">
      <!-- 按钮 -->
      <el-row class="elButtom">
        <el-button v-permission="'add-role'" type="primary" size="small" @click="addClick(1,0)">添加权限</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" row-key="id">
        <el-table-column fixed prop="name" label="姓名" width="320" align="center" />
        <el-table-column prop="code" label="标识" width="280" align="center" />
        <el-table-column prop="description" label="描述" width="280" align="center" />
        <el-table-column fixed="right" label="操作" width="320" align="center">
          <template v-slot="{row}">
            <el-button v-if="row.type === 1" type="text" size="small" @click="addClick(2,row.id)"> 添加 </el-button>
            <el-button type="text" size="small" @click="editClick(row.id)"> 编辑 </el-button>
            <el-button type="text" size="small" @click="delClick(row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 模态框 -->
      <el-dialog width="700px" :title="isEdit?'编辑权限':'添加权限'" :visible.sync="showDialog" @close="close">
        <el-form ref="ruleFormref" :model="addForm" :rules="rules" label-width="100px">
          <el-form-item label="权限名称" prop="name" label-width="100px">
            <el-input v-model="addForm.name" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code" label-width="100px">
            <el-input v-model="addForm.code" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description" label-width="100px">
            <el-input v-model="addForm.description" type="textarea" :rows="3" style="width:100%" placeholder="请输入角色描述" />
          </el-form-item>
          <el-form-item label="启用" prop="enVisible" label-width="100px">
            <!-- :active-value="1" 这样写 代表给组件传递数字 "1"   -->
            <!-- active-value="1" 这样写 代表给组件传递字符串 "1"  -->
            <el-switch v-model="addForm.enVisible" :active-value="1" :inactive-value="0" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" style="width:100px;" @click="submitForm">{{ isEdit?'更新':'确认' }}</el-button>
          <el-button style="width: 100px;" @click="cancelForm">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissionRequest, delPermissionRequest, postPermissionRequest, getPermissionRequestid, putPermissionRequestid } from '@/api/permission'
// 递归函数
import { transListToTreeData } from '@/utils'
export default {
  name: 'Permission',
  data() {
    return {
      // 声明一个数组 用于渲染表格
      tableData: [],
      // 声明一个变量isEdit 来控制点击新增和编辑按钮
      isEdit: false,
      // 模态框开关
      showDialog: false,
      // 模态框 表单值
      addForm: {
        name: '', // 权限名称
        code: '', // 权限标识
        description: '', // 权限点描述
        enVisible: 1, // 权限点开启状态 默认是启用的,1启用状态 0未启用状态
        // 页面权限是1 按钮权限 2 用户按了什么值 就手动修改成1 和2
        type: null,
        pid: null,
        id: null // 用于发送编辑确认
      },
      // 表单非空和正则校验
      rules: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2-10位权限名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限标识', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2-10位权限标识', trigger: 'blur' }],
        description: [{ required: true, message: '请输入角色描述', trigger: 'blur' },
          { min: 1, max: 100, message: '请输入1-100位角色描述', trigger: 'blur' }]
      }
    }
  },
  // 通过created钩子 进入页面就发送ajax
  created() {
    this.getPermission()
  },
  methods: {
    // 发送ajax用于渲染首次渲染表单哦
    async getPermission() {
      const res = await getPermissionRequest()
      console.log(res)
      // 渲染页面
      this.tableData = transListToTreeData(res.data.data, 0)
    },
    // 表单添加 添加权限按钮 两个共同一个按钮 但是传递的参数不一样
    addClick(type, pid) {
      // 开启模态框
      this.showDialog = true
      // 传递的是1 代表一级添加 传递的2 代表二级添加
      this.addForm.type = type
      this.addForm.pid = pid
      this.addForm.id = pid
    },
    // 表单编辑 发送ajax 做数据回显功能
    async editClick(id) {
      // 开启模态框
      this.showDialog = true
      // 开启我们自定义的变量
      this.isEdit = true
      // 把id赋值给addForm 用于后面的确认按钮
      this.addForm.id = id
      // 发送ajax
      const res = await getPermissionRequestid(id)
      console.log(res)
      // 渲染页面 做数据回显功能
      this.addForm = res.data.data
    },
    // 表单删除
    async delClick(id) {
      // 发送ajax
      await delPermissionRequest(id)
      // 提示框
      this.$message('已删除')
      // 重新调用函数 渲染页面
      this.getPermission()
    },
    // 模态框X标志
    close() {
      // 关闭模态框
      this.showDialog = false
      // 把变量的数据恢复为初始值
      this.isEdit = false
      // 清空表单
      this.$refs.ruleFormref.resetFields()
    },
    // 模态框确认按钮
    submitForm() {
      this.$refs.ruleFormref.validate(async valid => {
        if (valid) {
          // 此处需要做一个条件判断 如果isEdit 是true 则是编辑 发送编辑的axios 不然就是新增
          if (this.isEdit) {
            await putPermissionRequestid(this.addForm)
            // 提示框
            this.$message('修改权限成功')
            // 调用模态框X方法
            this.close()
            // 重新调用函数 渲染页面
            this.getPermission()
          } else { // 发送添加的axios请求
            await postPermissionRequest(this.addForm)
            // 提示框
            this.$message('添加权限成功')
            // 调用模态框X方法
            this.close()
            // 重新调用函数 渲染页面
            this.getPermission()
          }
        }
      })
    },
    // 模态框取消按钮
    cancelForm() {
      // 调用模态框X方法
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  padding: 10px;
  background:  #f5f6f8;
  .Department-container{
  font-size: 14px;
  background: #fff;
  color: #606266;
  .elButtom {
    padding: 7px 15px;
    .elTable{
      margin: 10px 20px ;
    }
  }
  .pagination {
    margin-top: 20px;
  }
}
}
</style>

